.main {
  background-color: #444654;
  height: 100vh;
  color: white;
  overflow-y: hidden;

  .top {
    display: flex;
    justify-content: left;
    width: 100%;
    height: calc(100% - 300px);

    .left {
      width: 300px;
      height: 100%;
      padding: 10px;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
    }

    .right {
      width: calc(100% - 300px);
      height: 100%;
      border-left: 1px solid #000;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
    }
  }
}

.content {
  padding: 10px;
  white-space: pre-wrap;
}

.chat {
  height: 300px;
  width: 100%;
  border-top: 1px solid #000;

  .tools {
    display: flex;
    justify-content: left;
  }

  .chat-input {
    width: 100%;
    height: 100%;
    padding: 10px;
    color: white;
    background-color: #40414f;

    &::-webkit-scrollbar {
      width: 0;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
  }
}

.randomName {
  margin-top: 10px;
  color: #fff;
  background-color: #000;
  margin-right: 5px;

  button {
    cursor: pointer;
    border-radius: 5px;
    padding: 1px 4px;
    margin-right: 10px;
  }
}

.MoInput {
  width: 100%;
  padding: 1px 4px;
}

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
